<template>
	<div class="duoshangpin">
    <left></left>
    <div class="right">
      <div style="height: 91px; border-bottom: 1px solid rgb(227, 232, 241); width: 100%; padding: 0 30px;" class="flexbc">
        <div class="flexcc fanhui" @click="back">
          <div><i class="el-icon-arrow-left" style="margin-right: 5px;"></i></div>
          <div>返回</div>
        </div>
        <top></top>
      </div>
      <div style="padding: 37px 30px 0 30px; height: calc(100vh - 91px); overflow: auto;">
        <div style="padding: 0px 0 19px 0; font-size: 18px; font-weight: 700;" class="flex">
          <div><img src="../../../static/img/gongying5.png" style="width: 22px; margin-right: 10px;"></div>
          <div>入网协议管理</div>
        </div>
        <el-button round type="primary" @click="chuangjian()">添加入网协议</el-button>
        <div style="margin-top: 20px;">
          <el-table :data="list" style="width: 100%">
            <el-table-column align="center" prop="id" label="ID"></el-table-column>
            <el-table-column align="center" prop="title" label="协议名称"></el-table-column>
            <el-table-column align="center" prop="created_at" label="添加时间"></el-table-column>
            <el-table-column align="center" prop="ok_count" label="操作">
              <template slot-scope="scope">
                <div class="flexcc">
                  <div @click="bianji(scope.row)" style="color: rgb(0, 90, 255); cursor: pointer; margin-right: 20px;">编辑</div>
                  <div @click="delbtn(scope.row)" style="color: rgb(0, 90, 255); cursor: pointer;">删除</div>
                </div>
              </template>
            </el-table-column>
          </el-table>
		  <!-- <footers></footers> -->
        </div>

      </div>
    </div>


    <el-dialog  title="创建协议" :visible.sync="log" center :close-on-click-modal="false" width="1000px">
      <div class="flexc" style="margin-bottom: 20px;">
        <div style="margin-bottom: 10px; margin-right: 20px;">协议名称</div>
        <div><el-input v-model="all.title" placeholder="请输入协议名称" ></el-input></div>
      </div>
      <div class="flexc" style="margin-bottom: 20px;">
        <div style="margin-bottom: 10px; margin-right: 20px;">协议内容</div>
        <div style="width: 800px;">
          <fuwenben :content="all.content" @getcontent="getcontent" v-if="relo"></fuwenben>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="log = false">关闭</el-button>
        <el-button type="primary" @click="xiugai">确定</el-button>
      </span>
    </el-dialog>
	</div>
</template>

<script>
  import left from '../left.vue'
  import top from '../top.vue'
  import footers from '../footer.vue'
  import fuwenben from '@/components/fuwenben.vue'
	export default {
		name: 'duoshangpin',
    components:{
      left,top,fuwenben,footers
    },
		data() {
			return {
        all:{
          id:"",
          title:"",
          content:""
        },
        log:false,
        total:0,
        list:[],
        relo:false
			}
		},
		created() {
      //列表
      this.getlist()

		},
		mounted() {

		},
		methods: {
      getcontent:function(item){
        this.all.content = item
      },
      bianji:function(item){
        this.all = {
          id:item.id,
          title:item.title,
          content:item.content
        }
        this.log = true
        this.relo = false
        this.$nextTick(()=>{
          this.relo = true
        })
      },
      chuangjian:function(){
        this.all = {
          id:"",
          title:"",
          content:""
        }
        this.log = true
        this.$nextTick(()=>{
          this.relo = true
        })
      },
      xiugai:function(){
        axios.post('/own/network/pact/set',this.all).then((response)=>{
        	if (response.data.msg.code == 0) {
            this.getlist()
            this.log = false
        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      },
      //列表
      getlist:function(){
        axios.get('/own/network/pact/get').then((response)=>{
        	if (response.data.msg.code == 0) {
            this.list = response.data.data
        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      },
      //删除
      delbtn(item){
        this.$confirm('是否确认删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios.post('/own/network/pact/del',{
            id:item.id
          }).then((response)=>{
            if (response.data.msg.code == 0) {
              this.$message({
                type: 'success',
                message: '操作成功!'
              });
              this.getlist()
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
      }
		}
	}
</script>


<style scoped >
 .t_over_text{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: calc(100% - 40px);
 }
</style>
